<template>
  <section class='f-card-add'>
    <section class="f-iccid-box">
      <p class="f-title">IMEI号</p>
      <van-search v-model="formData.imei" placeholder="请输入或者扫描设备包装盒上的条形码" clearable left-icon @blur="setChangeCode">
        <template #right-icon>
          <div class="g-flex-ct" @click="scanCode(1)">
            <img style="width:18px;height: 16px;" src="@/assets/icons/btn_scan.png" alt="">
          </div>
        </template>
      </van-search>
      <p class="f-tips">{{errMsg  }}</p>

      <template v-if="step == 2">
        <p class="f-title">用户码</p>
        <van-search v-model="formData.code" placeholder="请输入或者扫描卡板上的条形码" :readonly="!showScan" clearable left-icon>
          <template #right-icon v-if="showScan">
            <div class="g-flex-ct" @click="scanCode(2)">
              <img style="width:18px;height: 16px;" src="@/assets/icons/btn_scan.png" alt="">
            </div>
          </template>
        </van-search>
      </template>

      <div class="f-submit-btn" v-if="step == 1">
        <van-button round block type="primary" color="#337ACC" @click="onSubmit">
          下一步
        </van-button>
      </div>

      <div class="f-submit-btn1" v-if="step == 2">
        <van-button style="width: 124px;color:black" round block color="#E8E8E8" t @click="stepBack">
          上一步
        </van-button>
        <van-button class="f-ml-20" round block type="primary" color="#337ACC" @click="onSubmit">
          下一步
        </van-button>
      </div>
    </section>
  </section>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import JsBridge from '@/utils/JsBridge.js'
import api from '../api'
import { successDeal } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      step: 1,
      errMsg: '',
      showScan: true,
      formData: {
        imei: '',
        code: '',
      },
      scanCodeType: 1,
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '绑定',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        bg: ''
      });

      // 扫码回调
      JsBridge.registerHandler("scanResult", function (data, responseCallback) {
        if (state.scanCodeType == 1) {
          state.formData.imei = data
          setChangeCode()
        } else if (state.scanCodeType == 2) {
          state.formData.code = data
        }
      });
    })

    // 扫码
    const scanCode = (scanCodeType) => {
      state.scanCodeType = scanCodeType
      JsBridge.callHandler('scanCode', (response) => { })
    }

    const setChangeCode = () => {
      api.changeCode({ code: state.formData.imei }).then(res => {
        state.formData.code = res.data.code
        state.step = 2
        state.errMsg = ''
        if (res.data.code) {
          state.showScan = false
        } else {
          state.showScan = true
        }
      }).catch(err => {
        state.step = 1
        state.errMsg = err.msg
      })
    }

    const setBind = () => {
      let json = state.formData
      api.bind(json).then(res => {
        successDeal('绑定成功')
        setTimeout(() => {
          router.go(-1)
        }, 500)
      })
    }

    const onSubmit = () => {
      if (state.step == 1) {
        setChangeCode()
      } else {
        setBind()
      }
    }

    const stepBack = () => {
      state.step = 1
    }

    return {
      ...toRefs(state),
      scanCode,
      setChangeCode,
      onSubmit,
      stepBack
    }
  }
}
</script>

<style lang='scss' scoped>
.f-card-add {
  padding: 26px 14px;
  font-weight: 400;
  font-size: 14px;
  color: #424242;
  .f-iccid-box {
    width: 347px;
    background: rgba(255, 255, 255, 1);
    border-radius: 13px;
    padding-bottom: 8px;
    .f-title {
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      padding: 17px 0 0px 14px;
    }
    .f-tips {
      font-weight: 300;
      font-size: 12px;
      color: #fd6a56;
      margin-left: 16px;
    }
  }
  :deep(.van-search__content) {
    border: 1px solid #aaaaaa;
    background: #fff;
  }
  .f-submit-btn {
    margin-top: 19px;
    padding: 30px 38px;
  }
  .f-submit-btn1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 19px;
    padding: 30px 17px;
  }
}
</style>